<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>黑白棋</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
<style>
html, body, p, div {margin:0;padding:0;}
</style>
</head>
<body>
<script type="text/javascript" src="../libs/minicomps.min.js"></script>
<script>
const {Panel,PlayButton,Label,TextInput,Canvas,Button,VSlider,VBox,NumericStepper,HSlider,RadioButton,Toggle,TipsManager,Stage} = mc;
let panel=new Panel(document.body,0,0,Stage.width,Stage.height);
let canvas=new Canvas(panel,300,100,400,400);
canvas.color='#00FF00';
var moonjs=new MoonBit101();
moonjs.init(canvas);
moonjs.start(20);
(function game(){
	const [black,white]=['#000000','#FFFFFF']
	const boxs=[];
	const array=[];
	let isPlay=false;
	let doArr=[];
	let ang=0;
	let isWrite=false;
	for(let i=0;i<4;i++){
		let arr=[];
		array.push(arr);
		for(let j=0;j<4;j++){
			let b=moonjs.createDisplay('rect').setWH(95,95);
			b.setColor(white);
			b.name=i+','+j;
			moonjs.click(b,onClick)
			boxs.push(b);
			arr.push(b);
		}
	}
	moonjs.displayRank(boxs,4,4,4,50,50);
	function onClick(b){
		if(isWrite){
			changeColor(b);
			return;
		}
		let as=b.name.split(',');
		let [i,j]=[parseInt(as[0]),parseInt(as[1])];
		doArr.length=0;
		doArr.push(array[i][j]);
		if(i>0) doArr.push(array[i-1][j]);
		if(j>0) doArr.push(array[i][j-1]);
		if(i<3) doArr.push(array[i+1][j]);
		if(j<3) doArr.push(array[i][j+1]);
		isPlay=true;
		ang=0;
		//for(let k=0;k<doArr.length;k++){
			//changeColor(doArr[k]);
		//}
	}
	function changeColor(b){
		b.color===black?b.setColor(white):b.setColor(black);
	}
	function log(...arg){
		console.log(...arg);
	}
	function changeGameOver(){
		let isOver=boxs.every((a)=>a.color===white);
		if(isOver){
			TipsManager.alert('恭喜你过关')
		}
	}
	function initTitle(arr){
		for(let i=0;i<16;i++){
			let [a,b]=[arr[i],boxs[i]];
			a==='0'?b.setColor(black):b.setColor(white);
		}
	}
	moonjs.update=()=>{
		if(isPlay){
			ang+=10;
			if(ang>=90){
				isPlay=false;
				ang=0;
			}
			for(let k=0;k<doArr.length;k++){
				doArr[k].a=ang;
				if(ang==0) changeColor(doArr[k]);
			}
			if(ang==0) changeGameOver();
		}
	}
	//----
	let toggle=new Toggle(panel, 220, 100, '是否为出题', false, ()=>{isWrite=!isWrite});
	new Button(panel,220,150,'生成题目',writeTitle).setSize(60);
	let txtRead=new TextInput(panel,300,50).setSize(300);
	new Button(panel,610,50,'开始做题',readTitle).setSize(60);
	function writeTitle(){
		let titles=[];
		for(let i=0;i<4;i++){
			let tis=[0,0,0,0];
			titles.push(tis);
			for(let j=0;j<4;j++){
				let b=array[i][j];
				b.color==white&&(tis[j]=1);
			}
		}
		let str=titles.toString()
		txtRead.text=str;
	}
	function readTitle(){
		let arr=txtRead.text.split(',');
		if(arr.length==16){
			let isNum=arr.every((a)=>!isNaN(a));
			if(isNum){
				toggle.toggled=false;
				isWrite=false;
				initTitle(arr);
			}else{
				TipsManager.SureCancel('转成数组时必须都是数字');
			}
		}else{
			TipsManager.SureCancel('题目数必须是16个,目前是'+arr.length);
		}
	}
	let initTitles=[['0,0,0,0,0,1,1,0,0,1,1,0,0,0,0,0']
	,['1,0,0,1,0,0,0,0,0,0,0,0,1,0,0,1']
	,['0,1,1,0,1,0,0,1,1,0,0,1,0,1,1,0']]
	let len=initTitles.length;
	for(let i=0;i<len;i++){
		new Button(panel,150,100+i*30,`第-${i+1}-题`,(e)=>{
			log(e.target.label)
			let i=parseInt(e.target.label.split('-')[1]);
			toggle.toggled=false;
			isWrite=false;
			let arr=initTitles[i-1][0].split(',');
			initTitle(arr);
		}).setSize(60);
	}
})()
</script>
</body>
</html>